<template>
    <div class="panel-box-wrap">
        <div class="panel-box">
             <div class="panel-item">
                 <h2 class="title">合作网络</h2>
                 <div class="content" style="height:230px;">
                     <div class="chart-wrap" ref="chart2"></div>
                 </div>
            </div>

            <div class="panel-item">
                 <h2 class="title">简介</h2>
                 <div class="content">
                     <!-- <p>1949年，伴随着新中国的诞生，中国科学院成立。</p>
                     <p>作为国家在科学技术方面的最高学术机构和全国自然科学与高新技术的综合研究与发展中心</p> -->
                 </div>
                 <div class="content">
                    <p><span>职称:</span><span v-text="authordetail.title"></span></p>
                    <p><span>邮件:</span><span v-text="authordetail.email_list"></span></p>
                    <p><span>发表文章数量:</span><span v-text="authordetail.num_pubs"></span></p>
                    <p><span>被引数量:</span><span v-text="authordetail.num_citation"></span></p>
                    <p><span>研究方向:</span><span v-text="authordetail.research_direction"></span></p>
                 </div>
            </div>
            <div class="layout">
                <div class="l-l">
                     <div class="panel-item">
                        <h2 class="title">技术动态数据统计</h2>
                        <div class="content" style="height:225px;">
                            <div class="chart-wrap" ref="chart1"></div>
                        </div>
                    </div>
                </div>
                <div class="l-r">
                    <div class="panel-item">
                        <h2 class="title">热词</h2>
                        <div class="wordcloud-wrap">
                          <div class="wordcloud" ref="wordcloud">

                          </div>
                        </div>
<!--                        <div class="outline-block orange">-->
<!--                            <div class="block" v-for="item in hotwords" :key="item.wordid">{{item.keyword}}</div>-->
<!--                        </div>-->
                    </div>
                    <div class="panel-item">
                        <h2 class="title">相关机构</h2>
                        <div class="outline-block blue">
                            <div class="block" v-for="item in orgs" :key="item.id">{{item.NAME}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Modal
          class="modal-wrap"
          v-model="dialog"
          :title="modalName"
        >
          <div v-if="type=='news'">
            <a class="news-link-item" v-for="newsitem in newslist" :href="newsitem.url" target="_blank">
              <span>{{newsitem.title}}</span>
            </a>
          </div>
          <div v-if="type=='patent'">
            <a class="news-link-item" v-for="patentitem in patentlist" @click="getInfoWindows2(patentitem,2)">
              <span>{{patentitem.title}}</span>
            </a>
          </div>
          <div v-if="type=='paper'">
            <a class="news-link-item" v-for="paperitem in paperlist" @click="getInfoWindows2(paperitem,1)">
              <span>{{paperitem.title}}</span>
            </a>
          </div>
          <div slot="footer">
            <Button  long  @click="ok">关闭</Button>
          </div>
        </Modal>
        <Modal
          class="modal-wrap"
          v-model="dialog2"
          :title="modalName2"
        >
          <div v-if="type=='patent'">
            <div class="list-item">
              <div class="inline-block">
                <div class="label">专利名称</div>
                <div class="text">{{patent.title}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">专利授权号</div>
                <div class="text">{{patent.pub_number}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">申请号</div>
                <div class="text">{{patent.app_number}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">申请年</div>
                <div class="text">{{patent.app_year}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">专利类型</div>
                <div class="text">{{patent.type}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">有效状态</div>
                <div class="text">{{patent.status}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">申请人/申请单位</div>
                <div class="text">{{patent.applicant}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">提名</div>
                <div class="text">{{patent.proposer}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">当前申请人</div>
                <div class="text">{{patent.cur_applicant}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">申请时间</div>
                <div class="text">{{patent.app_time}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">开放年</div>
                <div class="text">{{patent.open_year}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">开放日期</div>
                <div class="text">{{patent.open_time}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">生效时间</div>
                <div class="text">{{patent.legal_status_time}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">发明人</div>
                <div class="text">{{patent.inventors}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">第一发明人</div>
                <div class="text">{{patent.first_inventor}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">发明人数</div>
                <div class="text">{{patent.inventors_count}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">申请人数</div>
                <div class="text">{{patent.applicant_count}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">申请省份</div>
                <div class="text">{{patent.applicant_province}}</div>
              </div>
            </div>
          </div>
          <div v-if="type=='paper'">
            <div class="list-item">
              <div class="inline-block">
                <div class="label">论文名称英文</div>
                <div class="text">{{paper.title_en}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">论文名称中文</div>
                <div class="text">{{paper.title_zh}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">论文关键词英文</div>
                <div class="text">{{paper.keywords_en}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">论文关键词中文</div>
                <div class="text">{{paper.keywords_zh}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">论文摘要英文</div>
                <div class="text">{{paper.abstract_en}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">论文摘要中文</div>
                <div class="text">{{paper.abstract_zh}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">作者列表英文</div>
                <div class="text">{{paper.authors_en}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">作者列表中文</div>
                <div class="text">{{paper.authors_zh}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">作者单位列表英文</div>
                <div class="text">{{paper.authors_affi_en}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">作者单位列表中文</div>
                <div class="text">{{paper.authors_affi_zh}}</div>
              </div>
            </div>
          </div>
          <div slot="footer">
            <Button  long  @click="ok2">关闭</Button>
          </div>
        </Modal>
    </div>
</template>
<script>
import delegate from '../js/event.js';
import 'echarts-wordcloud';
import echarts from "echarts";
import data2 from "./guanxi.json";
import mixin from '../js/mixin.js';
export default {
    mixins:[mixin],
    data() {
        return {
           data2,
           authordetail:{},
           hotwords:[],
           orgs:[],
           authorId:'',
           dialog:false,
           dialog2:false,
           modalName:'',
           modalName2:'',
           type:'',
           patentlist:[],
           newslist:[],
           paperlist:[],
           patent:{},
           news:{},
           paper:{},
        }
    },
    mounted(){
        this._initMethod();
    },
    beforeDestroy(){
        // 移除事件
        delegate.$off('s-search',this._initSearch);
    },
    methods: {
       randomColor(id){
           let colorList = ['#9a6728','#00a8ff','#0d5a35','#b40177','#1490ae','#00ff00'];
           let idsList = ['author','org','tech','paper','patent'];
           let index = -1;

           idsList.some((item,_index) => {
                if( (id+'').indexOf(item) >= 0 ){
                    index = _index;
                    return true;
                }
           });
           let current = index+1;
           return colorList[ current % colorList.length ]

        　　//var colorStr=Math.floor((0.1+Math.random())*0xFFFFFF).toString(16).toUpperCase();
        　　//return "#"+"000000".substring(0,6-colorStr)+colorStr;
        },
        _initMethod() {
            delegate.$on('s-search',this._initSearch);
        },
        _initSearch(obj) {

        },
        _initChart(current){
             console.log(current,'panel');
             this._getDate(current);

        },
         _getDate(current){
            if(!this.navCurrentId) return;
            this.authorId = current.id;
            this.api({
                    url: "authoranalyse/authorDetail",
                    method: "post",
                    data:`topicId=${this.navCurrentId}&authorId=${current.id}`
            }).then(data => {
                this._formatDetail(data);
                this._formatChart(data);

                this.chart2();
                this.chart1();
                this.wordcloud();
            })
        },
        _formatDetail(data){
            this.authordetail = data.authordetail;
            let hotwords = [];
            data.hotwords.forEach((item)=>{
              hotwords.push({
                name: item.keyword,
                value: item.weight,
                // Style of single text
                textStyle: {
                  normal: {},
                  emphasis: {}
                }
              })
            });
            this.hotwords = hotwords;
            this.orgs = [...data.orgs];
        },
        _formatChart(data){
            // 处理 关系图
            let $this = this;
            this.nodes = [];
            this.edges = [];
            this.chart1data = [];
            data.nodes.forEach(function(node) {
                var datanode = {
                    // x: parseInt(Math.random()*800),
                    // y: parseInt(Math.random()*800),
                    id: node.id + '',
                    name: node.label,
                    symbolSize: 25,
                    itemStyle: {
                        normal: {
                            color: $this.randomColor(node.id)
                        }
                    }
                };
                $this.nodes.push(datanode);
            });

            data.edges.forEach(function(edge) {
                var dataedge =  {
                    source: edge.sourceID + '',
                    target: edge.targetID + '',
                    lineStyle:{
                        width: 2
                    }
                };
                $this.edges.push(dataedge);
            });

            data.techNums.forEach(function(techNum){
                $this.chart1data.push({
                    value:techNum.num,
                    name:techNum.text
                })
            })




        },
        chart1(){
            let $this = this;
            this.$nextTick(() => {
                if(!this.myChart1) {
                  this.myChart1 = echarts.init(this.$refs.chart1);
                  // 绑定点击事件
                  this.myChart1.on('click', function (params) {
                    $this.getInfoWindows(params);
                  });
                }
                let xData = ['论文','专利','新闻动态','专家'];
                let option = {
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        color:['#b40177','#1490ae', '#9a9028', '#024691', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
                        series : [
                            {
                                name:'技术动态数据统计',
                                type:'pie',
                                radius : '85%',
                                center: ['50%', '50%'],
                                data:this.chart1data,
                                label: {
                                    position:'inside'
                                },
                                labelLine: {
                                    show:false
                                },
                                animationType: 'scale',
                                animationEasing: 'elasticOut',
                                animationDelay: function (idx) {
                                    return Math.random() * 200;
                                }
                            }
                        ]
                };
                this.myChart1.setOption(option);
            });
        },
        chart2(){
             this.$nextTick(() => {
                let myChart = echarts.init(this.$refs.chart2);
                myChart.showLoading();
                myChart.hideLoading();
                myChart.clear();
                myChart.setOption(
                {
                    animationDurationUpdate: 1500,
                    animationEasingUpdate: "quinticInOut",
                    series: [
                    {
                        type: "graph",
                        layout: "force",
                        // progressiveThreshold: 700,
                        force : { //力引导图基本配置
                            //initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
                            repulsion : 100,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                            gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                            edgeLength :80,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
                            layoutAnimation : true
                        //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
                        },
                        data: this.nodes,
                        draggable:true,
                        edges: this.edges,
                        symbolSize: 30,
                        label: {
                        show:true,
                        emphasis: {
                            position: "inside",
                            show: true
                        }
                        },
                        roam: true,
                        focusNodeAdjacency: true,
                        lineStyle: {
                            color: 'source',
                            curveness: 0.3
                        },
                        emphasis: {
                            lineStyle: {
                                width: 10
                            }
                        }
                    }
                    ]
                },
                true
                );
            });
        },
        wordcloud(){
        this.$nextTick(() => {
          let myChart = echarts.init(this.$refs.wordcloud);
          myChart.showLoading();
          myChart.hideLoading();
          myChart.clear();
          myChart.setOption({
              series: [{
                type: 'wordCloud',

                // The shape of the "cloud" to draw. Can be any polar equation represented as a
                // callback function, or a keyword present. Available presents are circle (default),
                // cardioid (apple or heart shape curve, the most known polar equation), diamond (
                // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

                shape: 'circle',

                // A silhouette image which the white area will be excluded from drawing texts.
                // The shape option will continue to apply as the shape of the cloud to grow.

                //  maskImage: maskImage,

                // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
                // Default to be put in the center and has 75% x 80% size.

                left: 'center',
                top: 'center',
                width: '70%',
                height: '80%',
                right: null,
                bottom: null,

                // Text size range which the value in data will be mapped to.
                // Default to have minimum 12px and maximum 60px size.

                sizeRange: [20, 40],

                // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

                rotationRange: [0, 0],
                rotationStep: 45,

                // size of the grid in pixels for marking the availability of the canvas
                // the larger the grid size, the bigger the gap between words.

                gridSize: 8,

                // set to true to allow word being draw partly outside of the canvas.
                // Allow word bigger than the size of the canvas to be drawn
                drawOutOfBound: false,

                // Global text style
                textStyle: {
                  normal: {
                    fontFamily: 'sans-serif',
                    fontWeight: 'bold',
                    // Color can be a callback function or a color string
                    color: function () {
                      // Random color
                      return '#09a596';
                    }
                  },
                  emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                  }
                },

                // Data is an array. Each array item must have name and value property.
                data: this.hotwords
              }]
            },
            true
          );
        });
      },
        ok(){
          this.dialog = false;
        },
        ok2(){
          this.dialog2 = false;this.dialog = true;
        },
        getInfoWindows(parme){
          let type = null;
          if(parme.data.name == '新闻动态'){
            type = 0;
          }
          if(parme.data.name == '论文'){
            type = 1;
          }
          if(parme.data.name == '专利'){
            type = 2;
          }
          if(!this.authorId) return;
          this.api({
            url: "authoranalyse/authorTechEventDetails",
            method: "post",
            data:`topicId=${this.navCurrentId}&type=${type}&authorId=${this.authorId}`
          }).then(data => {
            if(data && data.length == 0){
              this.$message({
                showClose: true,
                message: '暂无数据无法查看',
                type: 'error'
              });
            }else{

              if(type == 0){
                this.dialog = true;
                this.modalName = '新闻动态';
                this.type = 'news';
                this.newslist = data;
              }
              if(type == 1){
                this.dialog = true;
                this.modalName = '论文动态';
                this.type = 'paper';
                this.paperlist = data;
              }
              if(type == 2){
                this.dialog = true;
                this.modalName = '专利动态';
                this.type = 'patent';
                this.patentlist = data;
              }
            }

          });
        },
        getInfoWindows2(item,index){
        // paper 论文
        if(index == 1){
          this.modalName2 = '论文详情';
          this.api({
            url: "newtechanalyse/paperDetail",
            method: "post",
            data:`topicId=${this.navCurrentId}&paperId=${item.id}`
          }).then(data => {
            this.dialog = false;
            this.dialog2 = true;
            this.type = "paper";
            this.paper = data;
          })
        }
        // patent 专利
        if(index == 2){
          this.modalName2 = '专利详情';
          this.api({
            url: "newtechanalyse/patentDetail",
            method: "post",
            data:`topicId=${this.navCurrentId}&patentId=${item.id}`
          }).then(data => {
            this.dialog = false;
            this.dialog2 = true;
            this.type = "patent";
            this.patent = data;
          })
        }
      }
    },
}
</script>
<style lang="scss" scoped>
  .panel-box-wrap{
      height: 100%;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 10px;
      .panel-box{
          position: relative;
          height: 100%;
          padding-left: 30px;
          //background-color: #091951;
        //   padding: 0 28px;
          &::before{
              position: absolute;
              content: '';
              left: 0;
              top: 30px;
              bottom: 10px;
              border-left: 1px solid #003aa4;
          }
      }
      .panel-item{
          .title{
              font-size: 18px;
              color: #fff;
              text-align: left;
              padding-top: 20px;
              padding-bottom: 8px;
          }
          .content{
              p{
                  text-align: left;
                  color: #98caec;
                  font-size: 12px;
                  line-height: 1.8;

              }
          }
          .outline-block{
              display: flex;
              justify-content: flex-start;
              flex-wrap: wrap;
              .block{
                  border-width: 1px;
                  border-style: solid;
                  padding: 0 10px;
                  height: 30px;
                  line-height: 30px;
                  border-radius: 3px;
                  text-align: center;
                  white-space: nowrap;
                  margin: 3px 10px;
              }
              &.orange{
                  .block{
                       border-color: #f59f00;
                       color: #f59f00;
                  }

              }
               &.blue{
                  .block{
                       border-color: #00a8ff;
                       color: #00a8ff;
                  }

              }
          }
      }
  }
  .chart-wrap{
      width: 100%;
      height: 100%;
  }
  .layout{
      display: flex;
      .l-l{
         flex: 0 0 334px;
      }
      .l-r{
          flex: 1;
          padding-left: 20px;
      }
  }
  .wordcloud-wrap{
    position: relative;
    padding-top: 50%;
    .wordcloud{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
</style>
